<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="./../../../template/OutletTTATemplate.xhtml">

    <ui:define name="contentInsert">
        <c:if test="#{checkBIPaymentMB.checkIsPaid()}">
            <h3><h:outputText value="Dish Sale" /></h3>
            <br/>
            <p:panel style="background:whitesmoke">
                <h:panelGrid columns="3">
                    <h:form>
                        <h:outputText value="Select chart type:"/>
                        <h:selectOneMenu value="#{mdsOutletMB.dishSaleChart}"> 
                            <f:selectItem itemLabel="Pie Chart" itemValue="1"/>
                            <f:selectItem itemLabel="Bar Chart" itemValue="2"/>
                            <f:selectItem itemLabel="Column Chart" itemValue="3"/>
                            <p:ajax update="dishSaleForm"   
                                    listener="#{mdsOutletMB.chartTypeUpdate()}" />
                        </h:selectOneMenu>
                    </h:form>
                    <h:form>
                        <h:selectOneMenu value="#{mdsOutletMB.dishSaleTimeWithin}">
                            <f:selectItems value="#{mdsOutletMB.timeOptions}"/>
                            <p:ajax update="dishSaleForm"
                                    listener="#{mdsOutletMB.dishContentUpdate()}"/>
                        </h:selectOneMenu>
                    </h:form>
                </h:panelGrid>
            </p:panel>
            <h:form id="dishSaleForm" >
                <c:if test="${mdsOutletMB.dishSaleChart == 1}">
                    <p:pieChart model="#{mdsOutletMB.dishSaleModel}"
                                width="100%" height="400px" style="piechartStyle"/>
                </c:if>
                <c:if test="${mdsOutletMB.dishSaleChart == 2}">
                    <br/>
                    <p:barChart model="#{mdsOutletMB.dishSaleCartesian}" 
                                width="100%" height="500px"
                                titleX="Sale" titleY="Dishes"/>
                </c:if>
                <c:if test="${mdsOutletMB.dishSaleChart == 3}">
                    <br/>
                    <p:columnChart model="#{mdsOutletMB.dishSaleCartesian}" 
                                   width="100%" height="400px"
                                   titleX="Dishes" titleY="Sales"/>
                </c:if>
            </h:form>
        </c:if>
    </ui:define>
</ui:composition>
